11 - Formatage de texte

Changer la couleur d'un texte

Il existe plusieurs moyens pour changer la couleur d'un texte :

            
                p{
                    /* Change la couleur via un nom de couleur en anglais (red, grey, black, etc...) */
                    color: red;
                }
            
        

            
                p{
                    /* Change la couleur via un code couleur hexadécimal */
                    color: #FF0000;
                }
            
        

Il existe plein de site permettant de récupérer un code couleur hexadecimal. Ex :https://htmlcolorcodes.com/fr/

            
                p{
                    /* Change la couleur via un code couleur rgb */
                    color: rgb(255, 0, 0);
                }
            
        

            
                p{
                    /* Change la couleur via un code couleur rgba (rgb + taux de transparence) */
                    color: rgba(255, 0, 0, 0.5);
                }
            
        

Changer la taille de texte

            
                p{
                    /* Change la taille du texte en pixels */
                    font-size: 24px;
                }
            
        

            
                p{
                    /* Change la taille du texte en rem */
                    font-size: 2rem;
                }
            
        

Utiliser rem plutôt que px est préférable pour les textes car rem permet à l'utilisateur de changer la taille depuis ses préférences de navigateurs.
Par défaut dans les navigateurs, 1rem = 16px

Mettre en italique

            
                p{
                    /* Met le texte en italic */
                    font-style: italic;
                }
            
        

            
                p{
                    /* Met le texte en normal */
                    font-style: normal;
                }
            
        

Changer la graisse (épaisseur) d'un texte

            
                p{
                    /* Met le texte en gras normal */
                    font-weight: bold;
                }
            
        

            
                p{
                    /* Met le texte en épaisseur normale */
                    font-weight: normal;
                }
            
        

            
                p{
                    /* Met le texte en gras léger */
                    font-weight: lighter;
                }
            
        

            
                p{
                    /* Met le texte en gras prononcé */
                    font-weight: bolder;
                }
            
        

Changer la décoration d'un texte

            
                p{
                    /* Souligne le texte */
                    text-decoration: underline;
                }
            
        

            
                p{
                    /* Barre le texte */
                    text-decoration: line-through;
                }
            
        

            
                p{
                    /* Trace une ligne au dessus du texte */
                    text-decoration: overline;
                }
            
        

            
                p{
                    /* Retire toute décoration du texte */
                    text-decoration: none;
                }
            
        

Changer l'alignement d'un texte

            
                p{
                    /* Centre le texte dans l'élément sélectionné */
                    text-align: center;
                }
            
        

            
                p{
                    /* Aligne à gauche le texte dans l'élément sélectionné */
                    text-align: left;
                }
            
        

            
                p{
                    /* Aligne à droite le texte dans l'élément sélectionné */
                    text-align: right;
                }
            
        

            
                p{
                    /* Justifie le texte dans l'élément sélectionné */
                    text-align: justify;
                }
            
        

Changer la couleur de fond d'un élément

            
                p{
                    /* Change la couleur de fond */
                    background-color: red;
                }
            
        

Background-color utilise les même types de couleurs que vu précédemment (code hexadecimaux, rgb, etc...)

Il est possible aussi de créer une couleur de fond en "dégradé" avec linear-gradient ou radial-gradient (voir générateur ici :https://cssgradient.io/).

Exemples :

            
                .element1{
                    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(158,0,255,1) 100%);
                }

                .element2{
                    background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
                }
            
        

Mettre une ombre sur un texte

            
                p{
                    /* Applique une ombre sur le texte */
                    text-shadow: 4px 4px 1px black;
                }
            
        

On peut utiliser des générateurs pour créer des ombres sur mesure : https://css3gen.com/text-shadow/

Transformation de texte

            
                p{
                    /* Met une majuscule à la première lettre de chaque mot */
                    text-transform: capitalize;
                }
            
        

            
                p{
                    /* Met tout en majuscule */
                    text-transform: uppercase;
                }
            
        

            
                p{
                    /* Met tout en minuscule */
                    text-transform: lowercase;
                }